<template>
  <el-row align="middle" :gutter="20">
    <el-col v-bind="grid" v-for="(item, index) in cartList" :key="index">
      <div class="cart_box">
        <div class="cart_box_icon" :class="item.class">
          <span class="cart_box_el_icon" :style="{ backgroundColor: item.color }" v-if="item.icon">
            <i class="iconfont" :class="item.icon" style="color: #fff;font-size: 23px;"></i>
          </span>
        </div>
        <div class="cart_box_txt">
          <span class="cart_box_num">{{ item.count | NumFormat }}</span>
          <span class="cart_box_tips">{{ item.name }}</span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'Index',
    props: {
      cartList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        grid: {
          xl: 6,
          lg: 6,
          md: 12,
          sm: 12,
          xs: 24
        }
      };
    }
  }
</script>

<style lang="scss" scoped>
  .cart_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    -webkit-transition: .3s;
    transition: .3s;
    &.cart_box:hover {
      -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    .cart_box_icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 20px;
      .cart_box_el_icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 23px;
        color: #fff;
      }
      &.two {
        background-color: #fff3e0;
      }
      &.one {
        background-color: #e4ecff;
      }
      &.three {
        background-color: #eaf9e1;
      }
      &.four {
        background-color: #ffeaf4;
      }
    }
    .cart_box_txt {
      .cart_box_num {
        display: block;
        color: #252631;
        font-size: 24px;
        line-height: 36px;
      }
      .cart_box_tips {
        display: block;
        color: #98a9bc;
        font-size: 12px;
        line-height: 18px;
      }
    }
  }
</style>
